//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only

import React, { useEffect, useState } from 'react';
import s from './infoCount.module.less';
import memberIcon from '@/assets/allIcon/icon-member.png';
import { useStores } from '@/hooks';
import UserPhoto from '@/components/Portrait/UserPhoto';
import { observer } from 'mobx-react';
import { Button, Space, Switch, message } from 'antd';
import { request } from '@/utils/request';
import { useHistory } from 'react-router-dom';
import { APP_ORG_MANAGER_PATH, APP_PROJECT_MANAGER_PATH } from '@/utils/constant';
import { list_ssh_key_name } from '@/api/local_repo';
import SshKeyListModal from './SshKeyListModal';
import { type FeatureInfo, update_feature, USER_TYPE_INTERNAL } from '@/api/user';
import { EditOutlined, PlusSquareTwoTone } from '@ant-design/icons';

export interface InfoCountProps {
  todoIssueCount: number;
  showTodoPanel: () => void;
}

const InfoCount = (props: InfoCountProps) => {
  const history = useHistory();

  const userStore = useStores('userStore');
  const projectStore = useStores('projectStore');
  const orgStore = useStores('orgStore');
  const appStore = useStores('appStore');

  const [sshKeyCount, setSshKeyCount] = useState(0);
  const [showSshKeyModal, setShowSshKeyModal] = useState(false);

  const loadSshKeyCount = async () => {
    const sshKeyNameList = await list_ssh_key_name();
    setSshKeyCount(sshKeyNameList.length);
  };


  useEffect(() => {
    loadSshKeyCount();
  }, []);



  return (
    <div className={s.infoCount_wrap}>
      {(appStore.vendorCfg?.account.inner_account == false && appStore.vendorCfg?.account.external_account == false) && (<div className={s.left_wrap} />)}
      {(appStore.vendorCfg?.account.inner_account == false && appStore.vendorCfg?.account.external_account == false) == false && (
        <div className={s.left_wrap}>
          <div style={{ cursor: (userStore.userInfo.testAccount || userStore.userInfo.userType != USER_TYPE_INTERNAL || userStore.sessionId == "") ? "default" : "pointer" }}
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
              if (userStore.sessionId == "") {
                return;
              }
              if (userStore.userInfo.testAccount) {
                return;
              }
              if (userStore.userInfo.userType != USER_TYPE_INTERNAL) {
                return;
              }
              userStore.showChangeLogo = true;
              userStore.accountsModal = false;
            }}>
            <UserPhoto logoUri={userStore.userInfo.logoUri} width='60px' style={{ border: "1px solid white", borderRadius: "30px", marginRight: "14px" }} />
          </div>
          <div className={s.content}>
            {userStore.sessionId != "" && (
              <div className={s.name}>
                欢迎您！{userStore.userInfo.displayName}
                {((userStore.userInfo.userType == USER_TYPE_INTERNAL && userStore.userInfo.testAccount == false) || appStore.vendorCfg?.work_bench.enable_user_resume) && (
                  <Button type="link" icon={<EditOutlined />} style={{ minWidth: 0, padding: "0px 0px", height: "20px" }}
                    onClick={e => {
                      e.stopPropagation();
                      e.preventDefault();
                      userStore.showChangeResume = true;
                    }} />
                )}
              </div>
            )}
            <div
              className={s.account}
            >
              {userStore.sessionId != "" && (
                <img src={memberIcon} alt="" />
              )}
              {userStore.sessionId == "" ? (
                <Button type="primary"
                  onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    userStore.showUserLogin = true;
                  }}>登录</Button>
              ) : (
                <Space style={{ paddingLeft: "2px" }}>
                  {userStore.userInfo.testAccount == false && userStore.userInfo.userType == USER_TYPE_INTERNAL && (
                    <a onClick={e => {
                      e.stopPropagation();
                      e.preventDefault();
                      userStore.showChangePasswd = true;
                      userStore.accountsModal = false;
                    }}>修改密码</a>
                  )}
                  <a style={{ fontSize: "12px" }} onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    if (appStore.inEdit) {
                      message.info("请先保存修改内容");
                      return;
                    }
                    userStore.showLogout = true;
                    userStore.accountsModal = false;
                  }}>退出登录</a>
                </Space>
              )}
            </div>
          </div>
        </div>
      )}



      <div className={s.right_wrap}>

        <div className={s.item}>
          <div>SSH密钥</div>
          <div>
            <Button type='link' style={{ minWidth: 0, padding: "0px 0px", fontSize: "20px", lineHeight: "28px" }}
              onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowSshKeyModal(true);
              }}>
              {sshKeyCount}
            </Button>
          </div>
        </div>

        {userStore.sessionId != "" && appStore.vendorCfg?.ability.enable_project && userStore.userInfo.featureInfo.enable_project && (
          <div className={s.item}>
            <div>当前待办</div>
            <div>
              <Button type='link' style={{ minWidth: 0, padding: "0px 0px", fontSize: "20px", lineHeight: "28px" }}
                onClick={e => {
                  e.stopPropagation();
                  e.preventDefault();
                  props.showTodoPanel();
                }} disabled={props.todoIssueCount == 0}>
                {props.todoIssueCount}
              </Button>
            </div>
          </div>
        )}

        {userStore.sessionId != "" && appStore.vendorCfg?.ability.enable_dataview && (
          <div className={s.item}>
            <div>数据视图</div>
            <div>
              <Switch size='small' checked={userStore.userInfo.featureInfo.enable_data_view} onChange={value => {
                const feature: FeatureInfo = {
                  enable_project: userStore.userInfo.featureInfo.enable_project,
                  enable_org: userStore.userInfo.featureInfo.enable_org,
                  enable_data_view: value,
                };
                request(update_feature({
                  session_id: userStore.sessionId,
                  feature: feature,
                })).then(() => userStore.updateFeature(feature));
              }} style={{ marginTop: "10px" }} />
            </div>
          </div>
        )}

        {userStore.sessionId != "" && appStore.vendorCfg?.ability.enable_project && (
          <div className={s.item}>
            <div>当前项目数</div>
            <div>
              <Space>
                <Button type='link' style={{ minWidth: 0, padding: "0px 0px", fontSize: "20px", lineHeight: "28px" }}
                  onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    history.push(APP_PROJECT_MANAGER_PATH);
                  }} disabled={!userStore.userInfo.featureInfo.enable_project}>
                  {projectStore.projectList.filter((item) => !item.closed).length}
                </Button>
                <Switch size='small' checked={userStore.userInfo.featureInfo.enable_project} onChange={value => {
                  const feature: FeatureInfo = {
                    enable_project: value,
                    enable_org: userStore.userInfo.featureInfo.enable_org,
                    enable_data_view: userStore.userInfo.featureInfo.enable_data_view,
                  };
                  request(update_feature({
                    session_id: userStore.sessionId,
                    feature: feature,
                  })).then(() => userStore.updateFeature(feature));
                }} />
              </Space>
            </div>
          </div>
        )}

        {userStore.sessionId != "" && appStore.vendorCfg?.ability.enable_org && (
          <div className={s.item}>
            <div>当前团队数</div>
            <div>
              <Space>
                <Button type='link' style={{ minWidth: 0, padding: "0px 0px", fontSize: "20px", lineHeight: "28px" }}
                  onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    history.push(APP_ORG_MANAGER_PATH);
                  }} disabled={!userStore.userInfo.featureInfo.enable_org}>
                  {orgStore.orgList.length}
                </Button>
                <Switch size='small' checked={userStore.userInfo.featureInfo.enable_org} onChange={value => {
                  const feature: FeatureInfo = {
                    enable_project: userStore.userInfo.featureInfo.enable_project,
                    enable_org: value,
                    enable_data_view: userStore.userInfo.featureInfo.enable_data_view,
                  };
                  request(update_feature({
                    session_id: userStore.sessionId,
                    feature: feature,
                  })).then(() => userStore.updateFeature(feature));
                }} />
              </Space>
            </div>
          </div>
        )}

        {userStore.sessionId != "" && (appStore.vendorCfg?.ability.enable_project || appStore.vendorCfg?.ability.enable_org) && (
          <div className={s.item}>
            <div>
              {(appStore.vendorCfg?.ability.enable_project && appStore.vendorCfg?.ability.enable_org) && "加入项目/团队"}
              {(appStore.vendorCfg?.ability.enable_project && appStore.vendorCfg?.ability.enable_org == false) && "加入项目"}
              {(appStore.vendorCfg?.ability.enable_project == false && appStore.vendorCfg?.ability.enable_org) && "加入团队"}
            </div>
            <Button type="link" style={{ minWidth: 0, padding: "0px 0px", fontSize: "20px", lineHeight: "28px" }}
              icon={<PlusSquareTwoTone style={{ fontSize: "20px", paddingTop: "4px" }} twoToneColor={["orange", "#eee"]} />}
              onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                appStore.showJoinModal = true;
              }} />
          </div>
        )}
      </div>


      {showSshKeyModal == true && (
        <SshKeyListModal onCount={value => setSshKeyCount(value)} onClose={() => setShowSshKeyModal(false)} />
      )}
    </div>
  );
};

export default observer(InfoCount);
